'use strict'
/**
 * path 模块
 * 提供了一些实用工具，用于处理文件和目录的路径
 */
const path = require('path')

const name = '设备远程监控平台'

/**
 * 解决路径问题的辅助函数
 * @param {string} dir  目录名称
 */
function resolve (dir) {
  /**
   * path.join([...paths])#
   * 新增于: v0.1.16
   * ...paths <string> 路径片段的序列
   *
   * 返回: <string>
   *
   * path.join() 方法会将所有给定的 path 片段连接到一起（使用平台特定的分隔符作为定界符），然后规范化生成的路径。
   *
   * 长度为零的 path 片段会被忽略。 如果连接后的路径字符串为长度为零的字符串，则返回 '.'，表示当前工作目录。
   *
   * path.join('/目录1', '目录2', '目录3/目录4', '目录5', '..');
   * // 返回: '/目录1/目录2/目录3/目录4'
   *
   * path.join('目录1', {}, '目录2');
   * // 抛出 'TypeError: Path must be a string. Received {}'
   * 如果任何的路径片段不是字符串，则抛出 TypeError。
   */

  /**
   * __dirname
   * 新增于: v0.1.27
   * <string>
   * 当前模块的目录名。 相当于 __filename 的 path.dirname()。
   *
   * 示例，从 /Users/mjr 运行 node example.js：
   *
   * console.log(__dirname);
   * // 打印: /Users/mjr
   * console.log(path.dirname(__filename));
   * // 打印: /Users/mjr
   */

  return path.join(__dirname, dir)
}
// vue.config.js 配置
module.exports = {
  // 选项...
  lintOnSave: 'default',
  // webpack-dev-server 相关配置
  devServer: {
    overlay: {
      warnings: true,
      errors: true
    },
    // disableHostCheck: true,
    // host: "0.0.0.0",
    port: '80',
    // devServer.open
    // boolean = false string object
    // Tells dev-server to open the browser after server had been started. Set it to true to open your default browser.
    // open: true
    // Provide browser name to use instead of the default one:
    // open: 'Google Chrome',

    // devServer.proxy
    // Type: string | Object
    // 如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。
    // devServer.proxy 可以是一个指向开发环境 API 服务器的字符串：
    // proxy: 'http://localhost:4000' // 这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:4000

    // 如果你想要更多的代理控制行为，也可以使用一个 path: options 成对的对象。
    // proxy: {
    //   '/api': {
    //     target: '<url>',
    //     ws: true,
    //     changeOrigin: true
    //   },
    //   '/foo': {
    //     target: '<other_url>'
    //   }
    // }
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  chainWebpack: config => {
    // 例如
    config.plugin('html').tap(args => {
      // console.log(args[0])
      args[0].globalData = {
        pageTitle: name
      }
      return args
    })
    // config.PAGE_TITLE = name
    // console.log('chainWebpack:', config.name())
    /**
     * 设置别名
     * 1. @ 源码目录
     * 2. @api 接口目录
     * 3. @assets 资源文件目录 比如全局样式，图片，字体文件等
     * 4. @components 通用组件目录，通常与业务无关，可复用性较高
     * 5. @layout Layout 页面组件
     * 6. @router 路由控制
     * 7. @store 基于 vuex 数据状态管理
     * 8. @utils 通用 js 库，封装的一些工具类
     * 9. @views 视图组件
     */

    const alias = config.resolve.alias
    alias
      .set('@', resolve('src'))
      .set('@api', resolve('src/api'))
      .set('@assets', resolve('src/assets'))
      .set('@components', resolve('src/components'))
      .set('@layout', resolve('src/layout'))
      .set('@router', resolve('src/router'))
      .set('@store', resolve('src/store'))
      .set('@utils', resolve('src/utils'))
      .set('@views', resolve('src/views'))
      .set('@theme', resolve('src/theme'))

    /**
     *  设置 svg-sprite-loader
     *  1. 先排除基础 loader 对 src/icons 目录的影响
     *  2. 定制新的规则
     *  3. 导入所有 svg 文件 具体实现在 src/icons/index.js
     *  4. 在 src/main.js 文件导入 src/icons/index.js 模块
     */

    //  1.
    config.module
      .rule('svg') // 已有的[基础 loader](https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/config/base.js)
      .exclude.add(resolve('src/icons')) // 已有的 svg 文件加载规则，排除对 src/icons 目录使用，这个目录将使用 svg-sprite-loader 的规则
      .end() // 完毕

    // 2.
    config.module
      .rule('icons') // 制定新的规则
      .test(/\.svg$/) // src/icons 目录下的的所有 svg 文件
      .include.add(resolve('src/icons'))
      .end() // 加载完毕
      .use('svg-sprite-loader') // 使用 svg-sprite-loader 把加载所有的 svg 文件转换成 svg-sprite
      .loader('svg-sprite-loader') // 可以把多个svg图标合并. 使用时只需根据合并的symbol的id即可
      .options({
        symbolId: 'icon-[name]'
        /**
         * 如何使用
         * <svg class="svg-icon" aria-hidden="true" v-on="$listeners">
         * <use xlink:href="#symbol的id" />
         * </svg>
         */
      })
      .end()
  }
}
